<template>
	<view class="sectionTwo">
		<view class="frame" @click="toSearchPage()">
			<image class="searchP" src="/static/images/lunbo/search.png" widthFix />
			<input type="text" placeholder="请输入内容" />
		</view>
		<view class="pag" @click="goToClassify()">
			国学 英语 全部分类
		</view>
	</view>
	<view class="uni-margin-wrap">
		<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="3000"
			:duration="500">
			<template v-for="(item,index) in carouselArr" :key="index">
				<swiper-item>
					<view class="swiper-item uni-bg-red">
						<image class="carousel_img" :src="item"></image>
					</view>
				</swiper-item>
			</template>
		</swiper>
	</view>
	<view class="course">
		<view class="course_sort">
			国学
		</view>
		<view class="course_content">
			<template v-for="item in chineseArr" :key="item.id">
				<view class="course_content_item" @click="goToDetail(item.id)">
					<view class="course_content_item_top">
						<image class="course_content_item_top_img" :src="item.img" mode="widthFix"></image>
						<text class="course_content_item_top_text">共{{item.num}}课</text>
					</view>
					<view class="course_content_item_name">{{item.name}}</view>
					<view class="course_content_item_msg">{{item.msg}}</view>
				</view>
			</template>
		</view>
	</view>
	<view class="course">
		<view class="course_sort">
			英语
		</view>
		<view class="course_content">
			<template v-for="item in englishArr" :key="item.id">
				<view class="course_content_item" @click="goToDetail(item.id)">
					<view class="course_content_item_top">
						<image class="course_content_item_top_img" :src="item.img" mode="widthFix"></image>
						<text class="course_content_item_top_text">共{{item.num}}课</text>
					</view>
					<view class="course_content_item_name">{{item.name}}</view>
					<view class="course_content_item_msg">{{item.msg}}</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				testValue: 'Hello',
				carouselArr:["/static/shop-1.jpg","/static/shop-2.jpg","/static/shop-3.jpg"],
				chineseArr:[
					{
						id:1,
						img:'/static/shop-1.jpg',
						num:11,
						name:'绘本名称1',
						msg:'推荐语1'
					},
					{
						id:2,
						img:'/static/shop-1.jpg',
						num:11,
						name:'绘本名称2',
						msg:'推荐语2'
					},
					{
						id:3,
						img:'/static/shop-1.jpg',
						num:11,
						name:'绘本名称3',
						msg:'推荐语3'
					}
				],
				englishArr:[
					{
						id:1,
						img:'/static/shop-1.jpg',
						num:11,
						name:'绘本名称1',
						msg:'推荐语1'
					},
					{
						id:2,
						img:'/static/shop-1.jpg',
						num:11,
						name:'绘本名称2',
						msg:'推荐语2'
					},
					{
						id:3,
						img:'/static/shop-1.jpg',
						num:11,
						name:'绘本名称3',
						msg:'推荐语3'
					}
				]
			}
		},
		methods: {
			goToClassify(){
				uni.navigateTo({
					url: '/uni_modules/my-earlyEducation/components/editDetail/editDetail'
				});
			},
			onSubmit(e) {
				console.log(e)
			},
			goToDetail(id){
				uni.navigateTo({
					url: '/subpkg/picture-book-detail/picture-book-detail?id='+id
				});
			},
			goToChannelList(theme){
				uni.navigateTo({
					url: '/uni_modules/channel-list/components/channel-list/channel-list?theme='+theme
				});
			},
			toSearchPage(){
				uni.navigateTo({
					url: '/uni_modules/my-earlyEducation/components/searchPage/searchPage'
				});
			}
		}
	}
</script>

<style scoped>
	.sectionTwo {
		width: 95%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10px;
	}
	.frame{
		display: flex;
		align-items: center;
	}
	.pag{
		width: 150px;
		height: 20px;
		line-height: 20px;
		background-color: #DDDDDD;
		border-radius: 10px;
		text-align: center;
	}
	input {
		border: 1px solid gray;
		border-radius: 15px;
		width: 140px;
		height: 20px;
		line-height: 20px;
	}
	
	.searchP {
		height: 30px;
		width: 30px;
	}
	.course_sort{
		font-weight: 800;
		color: aqua;
		background-color: plum;
		display: inline-block;
		border-radius: 5px;
		margin: 10px;
		padding: 3px 10px;
	}
.carousel_img{
	width: 100%;
	height: 150px;
}
.course_content{
	display: flex;
	justify-content: space-around;
}
.course_content_item{
	width: 30%;
}
.course_content_item_top{
	position: relative;
}
.course_content_item_top_img{
	width: 100%;
	display: block;
}
.course_content_item_top_text{
	position: absolute;
	bottom: 0;
	right: 10px;
	color: pink;
}
.course_content_item_msg{
	text-align: center;
	color: #666666;
	font-size: 14px;
}
.course_content_item_name{
	text-align: center;
}
</style>
